<template>
  <template v-if="showLogo">
    <p class="item-title">学校logo</p>
    <img class="item-img" :src="data.logo" />
    <div class="item-uplaod flex items-center">
      <a-input v-model="data.logo" placeholder="请输入图片链接" allow-clear />
      <a-upload class="fit-content" :show-file-list="false" action="/" />
    </div>
  </template>
  <p class="item-title">标题</p>
  <a-input v-model="data.title" placeholder="请输入标题" allow-clear />
  <p class="item-title">子标题</p>
  <a-input v-model="data.subTitle" placeholder="请输入子标题" allow-clear />
  <p class="item-title">名称</p>
  <a-input v-model="data.name" placeholder="请输入名称" allow-clear />
  <p class="item-title">标签</p>
  <a-input v-model="data.label" placeholder="请输入标签" allow-clear />
  <p class="item-title">图片</p>
  <img class="item-img" :src="data.imgSrc" />
  <div class="item-uplaod flex items-center">
    <a-input v-model="data.imgSrc" placeholder="请输入图片链接" allow-clear />
    <a-upload class="fit-content" :show-file-list="false" action="/" />
  </div>
  <a-input class="mt-2" v-model="data.alt" placeholder="图片alt" allow-clear />
  <p class="item-title pt-2">按钮（最多{{ maxNum }}个）</p>
  <draggable
    v-model="data.buttonList.data"
    :component-data="{
      tag: 'div',
      type: 'transition-group',
      name: !drag ? 'flip-list' : null
    }"
    v-bind="buttonDragOptions"
    :disabled="!shouldShowDragHandle(data.buttonList.data)"
    @start="drag = true"
    @end="drag = false"
    item-key="id"
  >
    <template #item="{ element: button }">
      <div
        class="item-button item-link draggable-item"
        :class="{ 'sortable-disabled': !shouldShowDragHandle(data.buttonList.data) }"
        :key="button.id"
      >
        <div class="btn-group">
          <div
            v-if="shouldShowDragHandle(data.buttonList.data)"
            class="drag-handle"
          >
            <icon-drag-arrow class="drag-icon" />
          </div>
          <icon-delete class="btn-delete" @click="handleDeleteButton(data.buttonList.data, button.id)" />
        </div>
        <a-button type="primary">{{ button.text }}</a-button>
        <div class="item-action flex items-center">
          <a-input class="action-text" v-model="button.text" placeholder="按钮文本" allow-clear />
          <a-input v-model="button.url" placeholder="按钮链接" allow-clear />
        </div>
        <a-checkbox :model-value="button.isExternal">是否外部链接</a-checkbox>
      </div>
    </template>
  </draggable>
  <a-button-group class="mt-2" type="primary">
    <a-button size="mini" @click="handleAddButton('default', data.buttonList.data)"><template #icon><icon-plus /></template> 默认按钮 </a-button>
    <a-button size="mini" @click="handleAddButton('white', data.buttonList.data)"><template #icon><icon-plus /></template> 白色按钮 </a-button>
    <a-button size="mini" @click="handleAddButton('light', data.buttonList.data)"><template #icon><icon-plus /></template> 亮色按钮 </a-button>
    <a-button size="mini" @click="handleAddButton('blue', data.buttonList.data)"><template #icon><icon-plus /></template> 蓝色按钮 </a-button>
  </a-button-group>
  <p class="item-name mt-2">段落</p>
  <draggable
    v-model="data.paragraphs"
    :component-data="{
      tag: 'div',
      type: 'transition-group',
      name: !drag ? 'flip-list' : null
    }"
    v-bind="paragraphDragOptions"
    :disabled="!shouldShowDragHandle(data.paragraphs)"
    @start="drag = true"
    @end="drag = false"
    item-key="id"
  >
    <template #item="{ element: paragraph }">
      <div
        class="item-button item-link draggable-item"
        :class="{ 'sortable-disabled': !shouldShowDragHandle(data.paragraphs) }"
        :key="paragraph.id"
      >
        <div class="btn-group">
          <div
            v-if="shouldShowDragHandle(data.paragraphs)"
            class="drag-handle"
          >
            <icon-drag-arrow class="drag-icon" />
          </div>
          <icon-delete v-if="canAddParagraph" class="btn-delete" @click="handleDeleteButton(data.paragraphs, paragraph.id)" />
        </div>
        <p class="item-title">标题</p>
        <a-input v-model="paragraph.title" placeholder="请输入标题" allow-clear />

        <p class="item-title mt-2">内容</p>
        <RichTextEditor :name="`Profile_editor_${paragraph.id}`" v-model="paragraph.content"></RichTextEditor>
      </div>
    </template>
  </draggable>
  <div v-if="canAddParagraph" class="item-add-btn flex items-center" @click="handleAddParagraph(data.paragraphs)">
    <icon-plus />
    <span class="btn-text">添加段落</span>
  </div>  
</template>

<script lang="ts" setup>
import { ref, computed, defineAsyncComponent } from 'vue'
// 动态导入 draggable，避免 SSR 问题
const draggable = defineAsyncComponent(() => import("vuedraggable"));
const RichTextEditor = defineAsyncComponent(() => import("@/common/RichTextEditor/index.vue"));
import { randomString } from '@/utils/common'

// 拖拽相关状态
const drag = ref(false)

const buttonDragOptions = computed(() => ({
  animation: 200,
  group: 'buttons', // 按钮专用分组
  disabled: false,
  ghostClass: 'ghost'
}))

const paragraphDragOptions = computed(() => ({
  animation: 200,
  group: 'paragraphs', // 段落专用分组
  disabled: false,
  ghostClass: 'ghost'
}))

// 检查是否应该显示拖拽图标
const shouldShowDragHandle = (list: any[]) => {
  return list && list.length > 1
}

const props = defineProps({
  data: {
    type: Object,
    default: () => {}
  },

  showLogo: {
    type: Boolean,
    default: true
  },

  maxNum: {
    type: Number,
    default: 2
  },

  canAddParagraph: {
    type: Boolean,
    default: false
  }
})

const handleAddButton = (type: string, list: any[]) => {
  if (list.length >= props.maxNum) return
  list.push({
    id: randomString(),
    type,
    text: '查看更多',
    url: undefined,
    isExternal: false
  })
}

const handleDeleteButton = (list: any[], id: string) => {
  list.splice(list.findIndex(item => item.id === id), 1)
}

const handleAddParagraph = (list: any[]) => {
  list.push({
    title: '耀华国际教育学校浙江桐乡',
    subTitle: '耀华国际教育学校浙江桐乡',
    name: '耀华国际教育学校浙江桐乡',
    label: '123',
    imgSrc: 'https://osswebsite.ycyw.com/media-library/ywies-bj/images/home/ywies-tx.jpg',
    alt: '',
    buttonList: {
      id: randomString(),
      type: 'BtnList',
      readOnly: true,
      width: '',
      bgColor: '',
      data: []
    },
    paragraphs: {
      title: '',
      content: ''
    }
  })
}
</script>

<style lang="scss" scoped> 
.setting-item {
  position: relative;
  padding: 16px 12px;
  background: #f0f2f5;
  border-radius: 8px;
  margin-bottom: 20px;

  .btn-group {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    padding: 4px;

    .btn-delete {
      padding: 4px;
      font-size: 24px;
      cursor: pointer;
    }
  }

  .item-name {
    font-size: 16px;
    font-weight: 600;
    padding-bottom: 10px;
    border-bottom: 1px solid #fff;
  }

  .item-button {
    position: relative;
    padding: 12px 8px 4px;
    background: #fff;
    border-radius: 4px;
    margin: 4px 0;
    transition: all 0.3s ease;

    &.draggable-item {
      cursor: move;

      &:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transform: translateY(-1px);
      }

      // 当禁用拖拽时，不显示拖拽效果
      &.sortable-disabled {
        cursor: default;

        &:hover {
          box-shadow: none;
          transform: none;
        }
      }
    }

    .arco-input-wrapper {
      background: #f2f3f5;
    }
  }

  .item-link {
    background: #f0f2f5;

    .arco-input-wrapper {
      background: #fff;
    }
  }

  .item-img {
    height: 100px;
  }

  // 拖拽相关样式
  .flip-list-move {
    transition: transform 0.5s;
  }

  .no-move {
    transition: transform 0s;
  }

  .ghost {
    opacity: 0.5;
    background: #c8ebfb;
  }

  .item-action {
    padding: 10px 0;

    .action-text {
      width: 150px;
      margin-right: 8px;
    }
  }

  .item-add-btn {
    display: inline-block;
    padding: 2px 8px;
    margin-top: 5px;
    font-size: 11px;
    color: #165dff;
    border-radius: 4px;
    font-weight: 600;
    border: 1px solid #165dff;
    cursor: pointer;
  }
}

.drag-handle {
  padding: 4px;
  cursor: grab;
  padding: 4px;
  border-radius: 4px;

  &:hover {
    background-color: #f0f2f5;
  }

  &:active {
    cursor: grabbing;
  }

  .drag-icon {
    font-size: 16px;
    color: #86909c;
  }
}
</style>
